<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
    <el-steps :active="active">
        <template v-for="(step, index) in steps" :key="index">
            <el-step>
                <template #title>
                    <span class="step-title" @click="active = step.value">{{ step.title }}</span>
                </template>
            </el-step>
        </template>
    </el-steps>

    <div v-show="active === 1" class="step1">
        <el-form-item label="节点名称">
            <el-input v-model="form.nodeName"/>
        </el-form-item>
        <el-form-item label="节点ID">
            <el-input v-model="form.typeConcatName" disabled/>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
        <dialog-footer @cancel="cancel" @ok="submitForm" ok-text="保存">
            <el-button type="success" @click="active = 2">下一步</el-button>
        </dialog-footer>
    </div>

    <div v-show="active === 2" class="step2">
<!--        <el-form-item>-->
            <div style="margin-bottom: 10px;">
                <el-button
                    type="primary"
                    size="small"
                    @click="addField"
                >添加配置</el-button>
                <el-button
                    type="danger"
                    size="small"
                    @click="batchDelete"
                    :disabled="selectedRows.length === 0"
                >删除配置</el-button>
            </div>
            <el-table :data="form.fields.field" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="30"/>
                <el-table-column prop="name" label="目的流字段名" width="160">
                    <template #default="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入目的流字段名"/>
                    </template>
                </el-table-column>
                <el-table-column prop="source" label="数据来源（JsonPath取值）" width="210">
                    <template #default="scope">
                        <el-input v-model="scope.row.source"/>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="转换类型" width="160">
                    <template #default="scope">
                        <el-input v-model="scope.row.type" placeholder="请输入转换类型"/>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="备注" width="240">
                    <template #default="scope">
                        <el-input v-model="scope.row.description" type="textarea" placeholder="请输入参数说明"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button
                            type="danger"
                            size="small"
                            @click="deleteField(scope.$index)"
                            :disabled="form.fields.field.length === 1"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="tip">逐行转换示例:取源数据$.userid即可,整体转换示例:$.data[0].userid表示取第一行的userid</div>
<!--        </el-form-item>-->
        <dialog-footer @cancel="cancel" @ok="submitForm" ok-text="保存">
            <el-button type="success" @click="active = 1">上一步</el-button>
        </dialog-footer>
    </div>

  </el-form>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';
import monacoEditor from "../disposition/monaco-editor.vue";

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';
import {ElMessage} from "element-plus";

const {flowData} = storeToRefs(flowCount);

defineComponent({
    name: 'JsonPath',
});
const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})

const steps = ref([
  { value: 1, title: '基本属性' },
  { value: 2, title: '转换配置' },
]);
const active = ref(1);
const loading = ref(false);

const form = reactive({
    nodeName: '',
    name: '',
    type: 'Rest',
    distribute: 'Y',
    copies: 1,
    method: '',
    inParamEncoding: '',
    outParamEncoding: '',
    urlField: '',
    remark: '',

    fields: {
        field: [
            {
                name: '',
                source: '',
                type: '',
                description: '',
            }
        ]
    },

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.method = flowData.value[props.detailObject.id]?.method || '';
    form.urlField = flowData.value[props.detailObject.id]?.urlField || '';
    form.inParamEncoding = flowData.value[props.detailObject.id]?.inParamEncoding || '';
    form.outParamEncoding = flowData.value[props.detailObject.id]?.outParamEncoding || '';
    form.remark = flowData.value[props.detailObject.id]?.remark || '';
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;

    form.fields.field = flowData.value[props.detailObject.id]?.fields?.field || [{
        name: '',
        source: '',
        type: '',
        description: '',
    }];

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

const selectedRows = ref([])
const addField = () => {
    form.fields.field.push({
        name: '',
        rename: '',
        length: '',
        description: '',
      });
}
// 处理选择变化
const handleSelectionChange = (val) => {
    selectedRows.value = val
}
// 批量删除方法
const batchDelete = () => {
    if (selectedRows.value.length === 0) return
    // 获取选中项的索引
    const indexes = selectedRows.value.map(row =>
        form.fields.field.indexOf(row)
    ).sort((a,b) => b - a) // 倒序排列避免删除错位
    // 执行删除
    indexes.forEach(index => {
        form.fields.field.splice(index, 1)
    })
    // 清空选中
    selectedRows.value = []
}
// 修改删除方法
const deleteField = (index) => {
    form.fields.field.splice(index, 1);
}


const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
  // 触发数据更新事件
  // emit('update-data', {
  //   id: props.detailObject.id,
  //   data: form
  // });
    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
    emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

</script>

<style scoped>
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
  line-height: 0.5;
}
</style>